In the previous step you created a new Windows Store project and added a Rectangle control with a gradient to the application. In this step you'll continue by adding a C1RangeSlider control that will control the gradient fill in the Rectangle.
Complete the following steps:
- In the XAML window of the project, place the cursor between the </Rectangle> and </Grid> tags and click once.
- Navigate to the Toolbox and double-click the C1RangeSlider icon to add the control to the application on top of the Rectangle.
- Give your control a name by adding x:Name="c1rs1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML <Xaml:C1RangeSlider x:Name="c1rs1" />
By giving it a unique identifier, you'll be able to access the control in code.
- Add a margin by adding Margin="50" to the <c1:C1RangeSlider> tag so that it appears similar to the following:
XAML This will set each edge the same distance away from the grid's border.
- Set the Orientation property to Vertical by adding Orientation="Vertical" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML By default Orientation is Horizontal and the control appears across the page.
- Set the UpperValue property to 1 by adding UpperValue="1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML The upper thumb will now begin at 1.
- Set the Maximum property to 1 by adding Maximum="1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML Users will now not be able to select a value greater than 1.
- Set the ValueChange property to 0.1 by adding ValueChange="0.1" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML When you click on the slider track at run time, the slider thumb will now move by 0.1 units.
- Set the Opacity property to "0.8" by adding Opacity="0.8" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML By default this property is set to 1 and the control appears completely opaque. Changing this to a lower number will make the control appear slightly transparent.
- Indicate event handlers by adding LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:
XAML You'll add code for these event handlers in a later step.
- Run your application now and observe that it looks similar to the following:
You've successfully set up your application's user interface, but right now the slider will do nothing if you move it. In the next step you'll add code to your application to add functionality.